<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html lang="en">
<head>
<jsp:include page="core/templates/header.jsp"></jsp:include>
</head>
<body class="header1 activateAppearAnimation">
	<div id="globalWrapper">
		<jsp:include page="core/templates/mainMenu.jsp"></jsp:include>
		<jsp:include page="core/templates/banner.jsp"></jsp:include>

		<!-- Content -->
		<section style="background: url('core/images/feature.png') repeat;">
			<div class="container pb15 pt15 ">
				<div class="row">
					<div class="col-md-10 mt15">
						<h2 class="textColorBlack">ค้นหางานที่ต้องการ</h2>
					</div>
					<div class="col-md-2 mt15">
						<div class="textCenter">
							<a href="postJob">
								<button type="submit" class="btn btn-labeled btn-success font4">
									<span class="btn-label"><i class="icon-briefcase"></i></span>ประกาศงานฟรี
									!
								</button>
							</a>
						</div>
					</div>
				</div>
				<div class="row mb15">
					<div class="col-md-12 mt15">
						<div class="row col-md-12 mt15 boxFocus color1"
							style="margin: auto;">
							<s:form action="searchJobByCondition" method="post"
								theme="css_xhtml" id="myform" name="myform">
								<div class="row">
									<div class="col-md-6">
										<s:textfield name="model.searchForm.keyword"
											cssClass="form-control"
											placeholder="ระบุชื่องานที่ต้องการค้นหา"></s:textfield>
									</div>
									<div class="col-md-2">
										<b>ทักษะที่เกี่ยวข้อง</b>
									</div>
									<div class="col-md-4">
										<input type="text" class=" form-control " placeholder="ทักษะ">
									</div>
								</div>
								<div class="row mt05">
									<div class="col-md-2">
										<b>ลักษณะการว่างจ้างงาน</b>
									</div>
									<div class="col-md-10">
										<s:checkboxlist
											list="#{'1':'ทั้งหมด','2':'ชั่วโมง','3':'รายวัน','4':'รายเดือน','5':'เหมาจ่ายทั้งงาน','6':'เปิดให้เสนอราคางาน'}"
											name="model.searchForm.formatTime" />
									</div>
								</div>
								<div class="row mb05">
									<div class="col-md-2">
										<b>ประเภทงาน</b>
									</div>
									<div class="col-md-4">
										<s:select headerKey="0" headerValue="--- ทั้งหมด ---"
											list="#{'1':'งานเร่งด่วน','2':'งานยอดนิยม','3':'งานที่ประกาศล่าสุด'}"
											cssClass="form-control" name="model.searchForm.kindJob" />
									</div>
									<div class="col-md-2">
										<b>ค่าตอบแทน</b>
									</div>
									<div class="col-md-4">
										<s:select headerKey="0" headerValue="--- ทั้งหมด ---"
											list="#{'1':'ไม่เกิน 1000 บาท','2':'ไม่เกิน 5,000 บาท','3':'ไม่เกิน 10,000 บาท','4':'ไม่เกิน 20,000 บาท','5':'ไม่เกิน 50,000 บาท','6':'มากกว่า 50,000 บาท'}"
											cssClass="form-control" name="model.searchForm.price" />
									</div>
								</div>
								<div class="row mb05">
									<div class="col-md-2">
										<b>ความน่าเชื่อถือของงาน</b>
									</div>
									<div class="col-md-4">
										<s:select headerKey="0" headerValue="--- ทั้งหมด ---"
											list="#{'5':'ระดับที่ 5 มากสุด','4':'ระดับที่ 4 มาก','3':'ระดับที่ 3 ปานกลาง','2':'ระดับที่ 2 พอใช้','1':'ระดับที่ 1 น้อยสุด'}"
											cssClass="form-control" name="model.searchForm.trust" />
									</div>
									<div class="col-md-2">
										<b>จังหวัด</b>
									</div>
									<div class="col-md-4">
										<select class="form-control" name="model.searchForm.workArea">
											<option value="">--- เลือก ---</option>
											<option>เชียงใหม่</option>
											<option>เชียงราย</option>
											<option>แพร่</option>
											<option>น่าน</option>
											<option>ลำปาง</option>
										</select>
									</div>
								</div>
								<div class="row mb05">
									<div class="col-md-2">
										<b>วันเริ่มต้นการทำงาน</b>
									</div>
									<div class="col-md-4">
										<input type="date" class="form-control"
											name="model.searchForm.startDateOfJob">
									</div>
									<div class="col-md-2">
										<b>วันสิ้นสุดการทำงาน</b>
									</div>
									<div class="col-md-4">
										<input type="date" class="form-control"
											name="model.searchForm.endDateOfJob">
									</div>
								</div>
								<div class="row">
									<div class="col-md-4 col-md-offset-2">
										<button type="submit"
											class="col-md-12 col-xs-12 col-sm-12 btn btn-info mt15">
											<div>
												<i class="icon-search"></i><span class="font3">&nbsp;ค้นหางาน</span>
											</div>
										</button>
									</div>
									<div class="col-md-4">
										<button type="reset"
											class="col-md-12 col-xs-12 col-sm-12 btn mt15">
											<div>
												<i class="icon-eraser"></i><span class="font3">&nbsp;ล้างข้อมูล</span>
											</div>
										</button>
									</div>
								</div>
							</s:form>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="pt05 colorGreen">
			<div class="container pb05 pt15">
				<div class="row">
					<h2 class="textColorBlack">เลือกงานตามหมวดหมู่</h2>
					<div id="demo">
						<div class="container">
							<div class="row mt05">
								<s:iterator value="model.listAptitubeType">
									<div
										class="col-md-2 col-sm-6 col-xs-6 nekoAnim-invisible nekoAnim-animated nekoAnim-fadeInLeftBig nekoAnim-visible"
										data-nekoanim="fadeInLeftBig" data-nekodelay="10"
										style="-webkit-animation: 10ms 10ms;">
										<article class="boxIcon" style="opacity: 1;">
											<s:a
												href="searchJobByCategory?model.searchForm.aptitudeType=%{aptitudeTypeID}"
												encode="true" method="post">
												<div class="imgBorder">
													<img class="img-circle img-responsive"
														src='<s:property value="image_icon"/>' alt="">
												</div>
												<h2 class="textColorBlack">
													<b><s:property value="aptitudeTypeName" /></b>
												</h2>
											</s:a>
										</article>
									</div>
								</s:iterator>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section id="content" class="pt30 pb15"
			style="background-color: rgba(226, 231, 238, 0.58); color: #000;">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="">
							<div class="row mb15">
								<div class="col-md-12">
									<h2>งานเร่งด่วน</h2>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<div class="color0 boxcontent">
										<div class="row">
											<div class="col-md-12">
												<div class="tab-content">
													<div class="tab-pane fade active in" id="newsTab">
														<div class="row">
															<s:iterator value="model.listJobUrgent" status="i">
																<div class="col-md-12 mb05">
																	<div class="media">
																		<a class="pull-left" href="" data-toggle="modal"
																			data-target="#detailUrgent<s:property value="#i.index"/>">
																			<img class="media-object img-thumbnail"
																			data-src="holder.js/64x64" alt="64x64"
																			src="file/images/job/<s:property value="job.jobID"/>/<s:property value="job.listPicture[0].pictureLocation"/>"
																			style="width: 64px; height: 64px;">
																		</a>
																		<div class="media-body">
																			<h4 class="media-heading">
																				<b><s:if test="job.jobName.length()>150">
																						<s:property value="job.jobName.substring(0,150)" />...
																					</s:if> <s:else>
																						<s:property value="job.jobName" />
																					</s:else></b>
																			</h4>
																			<ul class="entry-meta">
																				<li class="entry-comments font6 mb05"><a
																					href="" data-toggle="modal"
																					data-target="#detailUrgent<s:property value="#i.index"/>"><i
																						class="icon-pin"></i> วันที่โพส <s:date
																							name="postDate" format="dd MMM yyyy" /></a></li>
																				<li class="entry-comments font6 mb05"><a
																					href="" data-toggle="modal"
																					data-target="#detailUrgent<s:property value="#i.index"/>"><i
																						class=" glyphicon glyphicon-calendar"></i>
																						ช่วงทำงาน <s:date name="job.startDateOfJob"
																							format="dd MMM yyyy" /> - <s:date
																							name="job.startDateOfJob" format="dd MMM yyyy" /></a></li>
																				<li class="entry-comments font6 mb05"><a
																					href="" data-toggle="modal"
																					data-target="#detailUrgent<s:property value="#i.index"/>"><i
																						class=" glyphicon glyphicon-tag"></i> <s:set
																							name="formatTime" value="job.formatTime"></s:set>
																						<s:if test="%{#formatTime=='รายชั่วโมง'}">
																						ราคา <s:property value="job.paymentOfJob.fixPrice" /> บาท/ชั่วโมง
																						</s:if> <s:elseif test="%{#formatTime=='รายวัน'}">
																						ราคา <s:property value="job.paymentOfJob.fixPrice" /> บาท/วัน
																						</s:elseif> <s:elseif test="%{#formatTime=='รายเดือน'}">
																						ราคา <s:property value="job.paymentOfJob.fixPrice" /> บาท/เดือน
																						</s:elseif> <s:elseif test="%{#formatTime=='เหมาจ่าย'}">
																						ราคา <s:property value="job.paymentOfJob.fixPrice" /> บาท
																						</s:elseif> <s:else>
																						ราคา <s:property value="job.paymentOfJob.minPrice" /> - <s:property
																								value="job.paymentOfJob.maxPrice" /> บาท
																						</s:else> </a></li>
																				<li class="entry-comments font6 mb05"><a
																					href="" data-toggle="modal"
																					data-target="#detailUrgent<s:property value="#i.index"/>"><i
																						class="glyphicon glyphicon-bell"></i> ร้องของาน <s:property
																							value="amountRequestPost" /> คน</a></li>

																			</ul>
																			<p>
																				<b>ทักษะที่ใช้ : </b>
																				<s:iterator value="listAptitude">
																					<span class="tags"><s:property
																							value="aptitudeName" /></span>
																				</s:iterator>
																				<br> <b>รายละเอียด : </b>
																				<s:if test="job.descriptionOfJob.length()>130">
																					<s:property
																						value="job.descriptionOfJob.substring(0,130)" />...
																					</s:if>
																				<s:else>
																					<s:property value="job.descriptionOfJob" />
																				</s:else>
																				<a href="" data-toggle="modal"
																					data-target="#detailUrgent<s:property value="#i.index"/>"><small>เพิ่มเติม</small></a>
																			</p>
																		</div>
																	</div>
																	<!-- Moldole -->
																	<div id="detailUrgent<s:property value="#i.index"/>"
																		class="modal fade" tabindex="-1"
																		style="display: none;">
																		<div class="modal-dialog">
																			<div class="modal-content">

																				<div class="modal-header">
																					<button type="button" class="close"
																						data-dismiss="modal">
																						<span>×</span><span class="sr-only">ปิด</span>
																					</button>
																					<h2 class="modal-title" id="myModalLabel">รายละเอียดงานโดยย่อ</h2>
																				</div>
																				<div class="modal-body">
																					<div class="row">
																						<div class="col-md-12" style="padding-left: 2em">
																							<div class="row mt05">
																								<div class="col-md-3 col-sm-3 col-xs-3">
																									<b>ชื่องาน</b> :
																								</div>
																								<div class="col-md-9 col-sm-9 col-xs-9">
																									<s:property value="job.jobName" />
																								</div>
																								<br>
																								<div class="col-md-3 col-sm-3 col-xs-3">
																									<b>ทักษะ</b> :
																								</div>
																								<div class="col-md-9 col-sm-9 col-xs-9">
																									<s:iterator value="listAptitude">
																										<span class="tags"><s:property
																												value="aptitudeName" /></span>
																									</s:iterator>
																								</div>
																								<div class="col-md-3 col-sm-3 col-xs-3">
																									<b>วันที่โพส</b> :
																								</div>
																								<div class="col-md-9 col-sm-9 col-xs-9">
																									10
																									<s:date name="postDate" format="dd MMM yyyy" />
																								</div>
																								<div class="col-md-3 col-sm-3 col-xs-3">
																									<b>ค่าตอบแทน</b> :
																								</div>
																								<div class="col-md-9 col-sm-9 col-xs-9">
																									<s:set name="formatTime" value="job.formatTime"></s:set>
																									<s:if test="%{#formatTime=='รายชั่วโมง'}">
																									คิดแบบรายชั่วโมง <u><b><s:property
																													value="job.paymentOfJob.fixPrice" /></b></u> บาท/ชั่วโมง
																									</s:if>
																									<s:elseif test="%{#formatTime=='รายวัน'}">
																									คิดแบบรายวัน <u><b><s:property
																													value="job.paymentOfJob.fixPrice" /></b></u> บาท/วัน
																									</s:elseif>
																									<s:elseif test="%{#formatTime=='รายเดือน'}">
																									คิดแบบรายเดือน <u><b><s:property
																													value="job.paymentOfJob.fixPrice" /></b></u> บาท/เดือน
																									</s:elseif>
																									<s:elseif test="%{#formatTime=='เหมาจ่าย'}">
																									คิดแบบเหมาจ่ายทั้งงาน  <u><b><s:property
																													value="job.paymentOfJob.fixPrice" /></b></u> บาท
																									</s:elseif>
																									<s:else>
																									เปิดโอกาสให้เสนอราคาในช่วง <u><b><s:property
																													value="job.paymentOfJob.minPrice" /> - <s:property
																													value="job.paymentOfJob.maxPrice" /></b></u> บาท
																									</s:else>
																								</div>
																								<div class="col-md-3 col-sm-3 col-xs-3">
																									<b>จำนวนผู้ร้องของาน</b> :
																								</div>
																								<div class="col-md-9 col-sm-9 col-xs-9">
																									<s:property value="amountRequestPost" />
																									คน
																								</div>
																								<div class="col-md-3 col-sm-3 col-xs-3">
																									<b>ช่วงเวลาทำงาน</b> :
																								</div>
																								<div class="col-md-9 col-sm-9 col-xs-9">
																									<s:date name="job.startDateOfJob"
																										format="dd MMM yyyy" />
																									-
																									<s:date name="job.startDateOfJob"
																										format="dd MMM yyyy" />
																								</div>
																								<div class="col-md-3 col-sm-3 col-xs-3">
																									<b>ข้อมูลเพิ่มเติม</b> :
																								</div>
																								<div class="col-md-9 col-sm-9 col-xs-9">
																									<s:property value="job.descriptionOfJob" />
																								</div>
																							</div>
																						</div>
																					</div>
																				</div>
																				<div class="modal-footer">
																					<button type="button"
																						class="btn btn-labeled btn-success font4">
																						<span class="btn-label"><i
																							class="icon-angle-circled-right"></i></span>ดูรายละเอียดทั้งหมดของงาน
																					</button>
																				</div>

																			</div>
																			<!-- /.modal-content -->
																		</div>
																		<!-- /.modal-dialog -->
																	</div>
																</div>
																<div class="col-md-12"><hr class="lineLines"></div>
															</s:iterator>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
				<div class="row mt30">
					<div class="col-md-12 ">
						<h2>งานยอดนิยม</h2>
					</div>
				</div>
				<div class="row mt15">
					<div class="col-md-12">
						<div class="color0 boxcontent">

							<div class="row mt05">
								<div class="col-md-12">
									<div class="table-responsive">
										<table class="table table-striped table-hover">
											<thead>
												<tr class="filters">
													<th class="textCenter">ชื่องาน</th>
													<th class="textCenter">ทักษะที่เกี่ยวข้อง</th>
													<th class="textCenter">ความน่าเชื่อถือ</th>
													<th class="textCenter">จำนวนผู้ร้องขอ</th>
													<th class="textCenter">ค่าตอบแทน (บาท)</th>
													<th class="textCenter">ช่วงวลาทำงาน</th>
												</tr>
											</thead>
											<tbody>
												<s:iterator value="model.listJobRecommended" status="i">
													<tr
														data-target="#recommendedJob<s:property value="#i.index"/>">
														<td><small><a href="" data-toggle="modal"
																data-target="#recommendedJob<s:property value="#i.index"/>">
																	<s:if test="job.jobName.length()>35">
																		<s:property value="job.jobName.substring(0,35)" />...
																					</s:if> <s:else>
																		<s:property value="job.jobName" />
																	</s:else>
															</a></small></td>
														<td class="textCenter"><small><s:iterator
																	value="listAptitude" status="i" begin="1" end="2">
																	<s:property value="aptitudeName" />
																	<s:if test="#i.count < listAptitude.size()">,</s:if>
																</s:iterator></small></td>
														<td class="textCenter"><small> <span
																class="textColorYelow"> <s:iterator var="counter"
																		begin="1" end="user.trustLevel">
																		<i class="icon-star"></i>
																	</s:iterator> <s:iterator var="counter" begin="1"
																		end="5 - user.trustLevel">
																		<i class="icon-star-empty"></i>
																	</s:iterator>
															</span></small></td>
														<td class="textCenter"><small><s:property
																	value="amountRequestPost" /></small></td>
														<td class="textCenter"><small> <s:set
																	name="formatTime" value="job.formatTime"></s:set> <s:if
																	test="%{#formatTime=='รายชั่วโมง'}">
																	<s:property value="job.paymentOfJob.fixPrice" /> บาท/ชั่วโมง
																						</s:if> <s:elseif test="%{#formatTime=='รายวัน'}">
																	<s:property value="job.paymentOfJob.fixPrice" /> บาท/วัน
																						</s:elseif> <s:elseif test="%{#formatTime=='รายเดือน'}">
																	<s:property value="job.paymentOfJob.fixPrice" /> บาท/เดือน
																						</s:elseif> <s:elseif test="%{#formatTime=='เหมาจ่าย'}">
																	<s:property value="job.paymentOfJob.fixPrice" /> บาท
																						</s:elseif> <s:else>
																	<s:property value="job.paymentOfJob.minPrice" /> - <s:property
																		value="job.paymentOfJob.maxPrice" /> บาท
																						</s:else>
														</small></td>
														<td class="textCenter"><small><s:date
																	name="job.startDateOfJob" format="dd MMM yyyy" /> - <s:date
																	name="job.startDateOfJob" format="dd MMM yyyy" /></small></td>
													</tr>
													<!-- Moldole -->
													<div id="recommendedJob<s:property value="#i.index"/>"
														class="modal fade" tabindex="-1" style="display: none;">
														<div class="modal-dialog">
															<div class="modal-content">

																<div class="modal-header">
																	<button type="button" class="close"
																		data-dismiss="modal">
																		<span>×</span><span class="sr-only">ปิด</span>
																	</button>
																	<h2 class="modal-title" id="myModalLabel">รายละเอียดงานโดยย่อ</h2>
																</div>
																<div class="modal-body">
																	<div class="row">
																		<div class="col-md-12" style="padding-left: 2em">
																			<div class="row mt05">
																				<div class="col-md-3 col-sm-3 col-xs-3">
																					<b>ชื่องาน</b> :
																				</div>
																				<div class="col-md-9 col-sm-9 col-xs-9">
																					<s:property value="job.jobName" />
																				</div>
																				<br>
																				<div class="col-md-3 col-sm-3 col-xs-3">
																					<b>ทักษะ</b> :
																				</div>
																				<div class="col-md-9 col-sm-9 col-xs-9">
																					<s:iterator value="listAptitude">
																						<span class="tags"><s:property
																								value="aptitudeName" /></span>
																					</s:iterator>
																				</div>
																				<div class="col-md-3 col-sm-3 col-xs-3">
																					<b>วันที่โพส</b> :
																				</div>
																				<div class="col-md-9 col-sm-9 col-xs-9">
																					10
																					<s:date name="postDate" format="dd MMM yyyy" />
																				</div>
																				<div class="col-md-3 col-sm-3 col-xs-3">
																					<b>ค่าตอบแทน</b> :
																				</div>
																				<div class="col-md-9 col-sm-9 col-xs-9">
																					<s:set name="formatTime" value="job.formatTime"></s:set>
																					<s:if test="%{#formatTime=='รายชั่วโมง'}">
																									คิดแบบรายชั่วโมง <u><b><s:property
																									value="job.paymentOfJob.fixPrice" /></b></u> บาท/ชั่วโมง
																									</s:if>
																					<s:elseif test="%{#formatTime=='รายวัน'}">
																									คิดแบบรายวัน <u><b><s:property
																									value="job.paymentOfJob.fixPrice" /></b></u> บาท/วัน
																									</s:elseif>
																					<s:elseif test="%{#formatTime=='รายเดือน'}">
																									คิดแบบรายเดือน <u><b><s:property
																									value="job.paymentOfJob.fixPrice" /></b></u> บาท/เดือน
																									</s:elseif>
																					<s:elseif test="%{#formatTime=='เหมาจ่าย'}">
																									คิดแบบเหมาจ่ายทั้งงาน  <u><b><s:property
																									value="job.paymentOfJob.fixPrice" /></b></u> บาท
																									</s:elseif>
																					<s:else>
																									เปิดโอกาสให้เสนอราคาในช่วง <u><b><s:property
																									value="job.paymentOfJob.minPrice" /> - <s:property
																									value="job.paymentOfJob.maxPrice" /></b></u> บาท
																									</s:else>
																				</div>
																				<div class="col-md-3 col-sm-3 col-xs-3">
																					<b>จำนวนผู้ร้องของาน</b> :
																				</div>
																				<div class="col-md-9 col-sm-9 col-xs-9">
																					<s:property value="amountRequestPost" />
																					คน
																				</div>
																				<div class="col-md-3 col-sm-3 col-xs-3">
																					<b>ช่วงเวลาทำงาน</b> :
																				</div>
																				<div class="col-md-9 col-sm-9 col-xs-9">
																					<s:date name="job.startDateOfJob"
																						format="dd MMM yyyy" />
																					-
																					<s:date name="job.startDateOfJob"
																						format="dd MMM yyyy" />
																				</div>
																				<div class="col-md-3 col-sm-3 col-xs-3">
																					<b>ข้อมูลเพิ่มเติม</b> :
																				</div>
																				<div class="col-md-9 col-sm-9 col-xs-9">
																					<s:property value="job.descriptionOfJob" />
																				</div>
																			</div>
																		</div>
																	</div>
																</div>
																<div class="modal-footer">
																	<button type="button"
																		class="btn btn-labeled btn-success font4">
																		<span class="btn-label"><i
																			class="icon-angle-circled-right"></i></span>ดูรายละเอียดทั้งหมดของงาน
																	</button>
																</div>

															</div>
															<!-- /.modal-content -->
														</div>
														<!-- /.modal-dialog -->
													</div>
												</s:iterator>
											</tbody>
										</table>
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</section>

		<section id="clients" class="pt30 pb30"
			style="background: url('core/images/feature.png') repeat;">
			<div class="container" data-nekoanim="fadeInUp" data-nekodelay="5">
				<div class="row">
					<div class="col-md-2  col-sm-4 col-xs-6">
						<img src="custom/images/temp/post02.png"
							class="img-responsive img-rounded" alt="clients">
					</div>
					<div class="col-md-2  col-sm-4 col-xs-6">
						<img src="custom/images/temp/post02.png"
							class="img-responsive img-rounded" alt="clients">
					</div>
					<div class="col-md-2 col-sm-4 col-xs-6">
						<img src="custom/images/temp/post02.png"
							class="img-responsive img-rounded" alt="clients">
					</div>
					<div class="col-md-2  col-sm-4 col-xs-6">
						<img src="custom/images/temp/post02.png"
							class="img-responsive img-rounded" alt="clients">
					</div>
					<div class="col-md-2  col-sm-4 col-xs-6">
						<img src="custom/images/temp/post02.png"
							class="img-responsive img-rounded" alt="clients">
					</div>
					<div class="col-md-2  col-sm-4 col-xs-6">
						<img src="custom/images/temp/post02.png"
							class="img-responsive img-rounded" alt="clients">
					</div>
				</div>
			</div>
		</section>


		<!-- End Content -->
		<jsp:include page="core/templates/footer.jsp" />
	</div>
</body>
</html>
